VMaxPoolMap Applet

Unique feature!Good Choice!
 

 

Creating an image map

Applet uses the same maps just as client-side HTML imagemap does. An image map is a graphic that can be divided into multiple areas, and each area of the map can point to a different URL. For client-side image maps, the mapping information is contained in a MAP tag in the HTML file that contains the IMG tag. The MAP tag contains one or more AREA tags. Each AREA tag describes a different area in the image and specifies the URL to which it connects. If the user clicks a point located in multiple overlapping areas, the area that is defined first in the MAP tag responds to the click.
 

Generally client-side imagemap has the following  structure:

<IMG SRC="yourimage.gif" USEMAP=#mapName>
<MAP NAME="mapName">
  <AREA ...>
  ...more areas here...
  <AREA ...>
</MAP>
 

Defining AREAs

The AREA tag describes an individual area in an image map. An image map can contain multiple
clickable areas, and each area can have a separate destination URL associated with it

Area tag attributes:

<AREA
  COORDS="coords"
  SHAPE="shape"
  HREF="location"
  NOHREF
  TARGET="windowName"
  ONMOUSEOUT="outJScode"
  ONMOUSEOVER="overJScode"
  NAME="areaName"
  ALT="Some Text"
>

The COORDS is the only required attribute for any shape with the excemption of shape DEFAULT.
Either the HREF or the NOHREF attribute must be supplied.

COORDS="coordsList"
specifies the comma separated list of the coordinates of the area  measured from the upper left corner of the image. See description of the SHAPE attribute for details of the format of the COORDS values.

SHAPE="shape"
specifies the shape of the map. If the SHAPE attribute is not specified, the shape is assumed to be a rectangle. Each shape has its own form of the COORDS attribute. For CIRCLE the value of the COORDS must have the form "x,y,r" where x and y are the coordinates of the center of the circle, and r is the radius. In case of RECT the value of the COORDS must have the form "x1,y1,x2,y2" where x1 and y1 are the coordinates of the left-top corner, and x2,y2 are the coordinates of the right-bottom corner of rectangle. POLY or POLYGON specifies a polygon, the value of COORDS must have the form "x1,y1,x2,y2,...xn,yn".  DEFAULT don't require COORDS attribute at all, area with this shape must be specified last.

HREF="location"
specifies the URL to invoke when a user clicks the area.

NOHREF
specifies that no URL is invoked when a user clicks the area. (Useful to create 'exclusions' in areas by overlaping nonlinked region)

TARGET="windowName"
specifies the frame or window into which the destination document is loaded, if the value of HREF is a URL then that points to a document. One can use frame names as they are defined with NAME attribute of FRAME tag in FRAMESET, or window names if named window was opened with JavaScript open(...) method, or one of the special meaning predefined names:
_top, _parent, _self or _blank

ONMOUSEOUT="outJScode"
specifies a JavaScript event handler to execute when a user moves the mouse cursor out  of the image or link text.
For information about JavaScript see any JavaScript tutorial.

ONMOUSEOVER="overJScode"
specifies a JavaScript event handler to execute when a user moves the mouse cursor over the image or link text.

ONCLICK="overJScode"
specifies a JavaScript event handler to execute before opening of area associated  url defined with HREF attribute.

ALT="some alternative text"
for browsers with graphics switched off.

Some examples:
Circle area with center at x=50,y=60 and radius 25
<AREA SHAPE=CIRCLE COORDS="50,60,25"
      HREF="http://www.oocities.org/SiliconValley/Lakes/8620"
      ALT="This is circle area"
>

Excluision example: inner rectangle with NOHREF responds to user actions and won't pass it to outer rectangle defined next.
<AREA SHAPE=RECT COORDS="50,50,60,60"  NOHREF>
<AREA SHAPE=RECT COORDS="40,40,70,70"  HREF="http://come.to/vmax">

Example of trinagle area defined as POLY with javascript handler on mouse clicks
<AREA SHAPE=POLY COORDS="20,20,20,40,40,20"
   HREF="http://come.to/vmax"
   onClick="return confirm('Are you sure you want to leave this page')"
>
 

JavaScript Events handling

Applet as well as AREA tags of imagemap support 3 basic events: onMouseOver, onMouseOut and onClick  to bring more life to pages. Event handler for onClick event can return boolean true or false value to continue or cancel executing further link processing.
VMaxPoolMenu Applet as well as normal AREA tag supports also JavaScript links ( HREF="Javascript:someJScodeHere").
For more information about JavaScript and JavaScript events see any JavaScript tutorial or references.
 

Embedding into HTML

Supposing you were able to create and test your client-side imagemap. Let's get the following one as an example:

<IMG SRC="myimage.gif" USEMAP=#mymap>
<map name="mymap">
   <area shape="rect" coords="10,10,100,20" href="page1.html">
   <area shape="rect" coords="10,30,100,40" href="page2.html">
</map>

Then you only need to wrap it inside the applet tag and supply the applet with the MAP and IMAGE parameters

<applet CODE=vmaxpoolmap.class WIDTH=300 HEIGHT=120 MAYSCRIPT>
  <param NAME="IMAGE"  VALUE="myimage.gif">
  <param NAME="MAP"    VALUE="mymap">
  <param NAME="AUTHOR" VALUE="Virtual_Max (http://come.to/vmax)">
  <param NAME="KEY"    VALUE="Free Version">
 

    <IMG SRC="myimage.gif" USEMAP=#mymap>
    <map name="mymap">
      <area shape="rect" coords="10,10,100,20" href="page1.html">
      <area shape="rect" coords="10,30,100,40" href="page2.html">
    </map>
 

</applet>

You will find that the same code is used for non-java browsers which will just ignore <applet..> and <param ..> tags and will show the imagemap, and for the applet which will parse the entire HTML page code to obtain the map from the page by the name passed with the MAP parameters.
 

Some things you need to keep in mind.

1. As applet can't connect to just any server other than the one it was loaded from. The image MUST be on the same server.
It's more safe to use the relative form of the URL for an IMAGE param than to use the full form of URL here.
2. This applet requires non-interlaced and non-animated image in GIF or JPG formats. Note also that if you are creating a JPG image with Photoshop 5.0 don't forget to check "Exclude Non-Image Data" checkbox in Save dialog window, and when you are prompted to select the compression method, use "Baseline standard". Saved with this options image will work with all browsers.
Keep in mind that on solid backgrounds the wave won't be visible at all.
3. Microsoft Internet Explorer 3 doesn't support scripting from the applet. Try not to make vitally important links with JavaScript.
This applet is highly CPU time consuming especially with old browsers (Java1.0.x). Its appetite is proportional to the image width multiplied to image height. Try not to use images larger than 300 x 200 pixels. Even if it's running OK on your Pentium III, 500MHz computer, someone still can come to your page with something like a 486DX2/66...
 

FOR ADVANCED USERS ONLY !

Below is the example as it is shown at the top of this page

This script is defined between <head> and </head> tags to dynamically show messages under applet from Event handlers in areas. Again this requires 2 branches for 2 browser.... 

<script>
 /* Script by Virtual_Max http://come.to/vmax
  * Script or any parts of it can be 
  * used modified free without special permission
  * until this note present unchanged in all it's 
  * copies and derivatives.
  */
 function showMess(s)
   {if(document.layers)
      {if(document['mess2'].document)
        {d=document['mess2'].document; 
         d.open();
         d.writeln(" "+s);
         d.close();
        }
      }
     if(document.all)
      {document.all.mess.innerHTML=" "+s;
      }
   }
</script>
Well, well, well... There goes a little bit of wired code of the applet with the image and the map nested inside, you can place it anywhere inside the body of the HTML document 
<applet CODE=vmaxpoolmap.class WIDTH=300 HEIGHT=120 MAYSCRIPT>
 <param NAME="IMAGE"  VALUE="vmaxpoolmap.jpg">
 <param  NAME="MAP"    VALUE="poolmap">
 <param  NAME="AUTHOR" VALUE="Virtual_Max (http://come.to/vmax)">
 <param  NAME="KEY"    VALUE="Free Version">

 <img SRC="vmaxpoolmap.jpg" usemap="#poolmap" >
 <map name=poolmap>

   <area shape="RECT" coords="134,34,248,48"  
      HREF="#map"  
      onClick="window.location='#map'; return false;"
      onMouseOver="showMess('Learn how to create imagemaps or how to use VMaxPoolMap applet with maps you already have')"
      onMouseOut="showMess('')"
   >

   <area shape="rect" COORDS="134,49,224,62"  
      HREF="#area" 
      onClick="Javascript:window.location='#area'; return false;"
      onMouseOver="showMess('All about AREA tag attributes of imagemaps, this applet support them all ')"
      onMouseOut="showMess('')"
   >

   <area shape="rect" coords="134,63,267,78"  
      href="#js"   
      onClick="javscript:window.location='#js'; return false;"
      onMouseOver="showMess(' <FONT COLOR=#CC0000><b>Unique</b> feature of this APPLET</FONT> Support for JavaScript event handlers.')"
      onMouseOut="showMess('')"
      ALT="Unique feature!"
   >

   <area SHAPE="rect" coords="134,79,251,91"  
      href="#html" 
      onClick="JAVASCRIPT:window.location='#html'; return false;"
      onMouseOver="showMess('<FONT COLOR=#000040>You will be surprized how easy it is!</FONT> ')"
      onMouseOut="showMess('')"
   >

   <AREA shape="rect" coords="133,96,176,107" 
      HREF="javascript:history.go(-1)"
      onClick="return confirm('Are you sure you want to leave this page?');"
      onMouseOver="showMess('<FONT COLOR=#008000><b>See you later...</b></FONT>')"
      onMouseOut="showMess('')"
   >

   <area shape="rect" coords="179,96,223,107" 
      HREF="http://come.to/vmax"
      onMouseOver="showMess('<FONT COLOR=#800000><b>Get more Applets, Scripts and Tips from Virtual_Max\'s Cafe</b></font>')"
      onMouseOut="showMess('')"
   >

   <area shape="rect" coords="227,96,279,107" 
      HREF="http://www.oocities.org/SiliconValley/Lakes/8620/license.html"
      ALT="Good Choice!"
      onMouseOver="showMess('<FONT COLOR=#cc0000><b>Don\'t forget to register!</b></font>')"
      onMouseOut="showMess('')"
   >

   <area shape="default" 
      href="http://come.to/vmax"
   >

</map>
</applet>
Last thing below is DIV with nested LAYER combination to make it work in both browsers, place it inside your document where you want to have messages appear. You are free of course to alter it's positioning and sizes.

<div id="mess" style="height:80;">
<layer id="mess2" height=80>
</layer>
</div>

Copyright 1999, Virtual_Max.